window.onload = function () {
    init();
}

function init() {
    initMenu();
}
var initMenu = (function () {
    var oMenu = document.getElementsByClassName('menu-wrap')[0],
        oMenuItems = oMenu.getElementsByClassName('main-item'),
        menuLen = oMenuItems.length,
        oSub = document.getElementsByClassName('sub')[0],
        oSubItems = document.getElementsByClassName('sub-list'),
        menuItem,
        subItem,
        t = null,
        isInSub = false,
        isFirst = true,
        mousePose = [];
    addEvent(oMenu, 'mouseenter', function () {
        addEvent(document, 'mousemove', mouseMove);
    });
    addEvent(oMenu, 'mouseleave', mouseLeaveOut);
    for (var i = 0; i < menuLen; i++) {
        menuItem = oMenuItems[i];
        addEvent(menuItem, 'mouseenter', mouseEnterMenu);
    }
    addEvent(oSub, 'mouseenter', function () {
        isInSub = true;
    });
    addEvent(oSub, 'mouseleave', function () {
        isInSub = false;
    });

    function mouseEnterMenu(e) {
        var e = e || window.event,
            tar = e.target || e.srcElement,
            thisIdx = Array.prototype.indexOf.call(oMenuItems, tar),
            posLen = mousePose.length,
            curPos = mousePose[posLen - 1] || {
                x: 0,
                y: 0
            },
            lastPos = mousePose[posLen - 2] || {
                x: 0,
                y: 0
            },
            toDelay = doTimeOut(lastPos, curPos);
        oSub.className = 'sub';
        if (t) {
            clearTimeout(t);
        }
       if(!isFirst){
        if (toDelay) {
            t = setTimeout(function () {
                if (isInSub) {
                    return;
                }
                addActive(thisIdx);
                t = null;
            }, 300);
        } else {
            addActive(thisIdx);
        }
       }else {
        addActive(thisIdx);
        isFirst = false; 
       }

    }

    function addActive(index) {
        removeActive();
        oMenuItems[index].className += ' active';
        oSubItems[index].className += ' active';
    }

    function removeActive() {
        for (var i = 0; i < menuLen; i++) {
            menuItem = oMenuItems[i];
            subItem = oSubItems[i];
            menuItem.className = 'main-item';
            subItem.className = 'sub-list';
        }
    }

    function mouseLeaveOut() {
        oSub.className += ' hide';
        removeActive();
        //离开menu-wrap的时候
        addEvent(document, 'mousemove', mouseMove);
    }

    function mouseMove(e) {
        var e = e || window.event;
        mousePose.push({
            x: pagePos(e).X,
            y: pagePos(e).Y,
        });
        if (mousePose.length >= 3) {
            mousePose.shift();
        }
    }

    function doTimeOut(lastPos, curPos) {
        var TL = {
                x: getStyles(oMenu, 'margin-left') + getStyles(oMenu, 'width'),
                y: getStyles(oMenu, 'margin-top'),
            };
        var BL = {
                x: getStyles(oMenu, 'margin-left') + getStyles(oMenu, 'width'),
                y: getStyles(oMenu, 'margin-top') + getStyles(oMenu, 'height')
            };
        return pointInTriangle({
            curPos: curPos,
            lastPos: lastPos,
            topLeft: TL,
            bottomLeft: BL,

        });
    }
});